<template>
  <div >
    <div style="text-align:right;line-height:30px">
      <el-row :gutter="20">
        <el-col :span="16" style="text-align: left">
          <el-button type="primary" size="mini" icon="el-icon-plus" plain @click="addOrganization" v-show="permissions.indexOf('fmOrganizationAdd')>0" >新增组织</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="deleteOrganization" v-show="permissions.indexOf('fmOrganizationDelete')>0" >删除组织</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" plain @click="refreshOrganization"  >刷新组织</el-button>
        </el-col>



      </el-row>
      <div style="height: 10px"></div>
      <el-row :gutter="20">
        <el-col :span="5" style="text-align: left">
          <el-input v-model="organizationName" placeholder="请输入组织名称" size="small" clearable></el-input>
        </el-col>
        <el-col :span="5" style="text-align: left">
          <el-input v-model="abbreviation" placeholder="请输入组织简称" size="small" clearable></el-input>
        </el-col>
        <el-col :span="5" style="text-align: left">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="organizationSearch"  >搜索</el-button>
        </el-col>

      </el-row>
    </div>
    <div>
      <el-table
        ref="organizationTable"
        :data="datas"
        tooltip-effect="dark"
        :stripe="true"
        :border="true"
        size="mini"
        @selection-change="changeFun"
        empty-text="没有数据"
        header-row-class-name="organizationTableHeadCss"
        style="width: 100%;margin-top:20px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          >
        </el-table-column>
        <el-table-column
          label="组织名称"
          prop="organizationName"
          width="100">
        </el-table-column>
        <el-table-column
          prop="abbreviation"
          label="名称简称"
          width="120">
        </el-table-column>
        <!--<el-table-column-->
          <!--prop="organationManager"-->
          <!--label="组织管理员"-->
          <!--width="120">-->
        <!--</el-table-column>-->
        <el-table-column
          prop="createUser"
          label="创建人"
          width="150">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">

              <i @click="showOrganizationPeopleList(scope.row)" v-show="permissions.indexOf('fmOrganizationUserShow')>0" ><icon name="people_list" :scale="2" class="pointcss" ></icon> &nbsp;&nbsp;</i>
              <i @click="showOrganizationEditDialog(scope.row)" v-show="permissions.indexOf('fmOrganizationUpdate')>0"> <icon name="edit" :scale="2" class="pointcss" ></icon>&nbsp;&nbsp;</i>
              <!--<i @click="showOrganizationOrderDialog(scope.row)" v-show="permissions.indexOf('fmOrganizationOrder')>0"><icon name="order" :scale="2" class="pointcss" ></icon>&nbsp;&nbsp;</i>-->
              <i @click="showOrganizationMoveDialog(scope.row)" v-show="permissions.indexOf('fmOrganizationMove')>0"> <icon name="exit" :scale="2" class="pointcss" ></icon></i>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px;text-align: center">
        <el-pagination background layout="total,prev, pager, next,jumper" :total="totals" :current-page="currentPage" v-on:current-change="pageChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="新增组织"
      :visible.sync="addOrganizationDialog"
      width="30%"
      >
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item
          prop="organizationName"
          label="组织名称:"
          :rules="filter_rules({required: true, max: 50, min: 3, type: 'nameBadCharactor'})"
        >
          <el-input v-model="dynamicValidateForm.organizationName" size="mini"></el-input>
        </el-form-item>
        <el-form-item
          label="组织简称:"
          prop="abbreviation"
          :rules="filter_rules({required: true, max: 50, min: 3, type: 'nameBadCharactor'})">
          <el-input v-model="dynamicValidateForm.abbreviation" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrganizationDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <editOrganizationComponent ref="editOrganizationDialog" v-on:on-result-change="organizationEditDialogchange" v-on:on-refresh-change="refreshOrganization"></editOrganizationComponent>
    <orderOrganizationComponent :organizationOrderDialog="organizationOrderDialog" :organizationOrderRow="organizationRow" v-on:on-result-change="organizationOrderDialogchange" v-on:on-refresh-change="refreshOrganization"></orderOrganizationComponent>
    <moveOrganizationComponent  ref="moveOrganizationDialog"  :treeApi="organizationTreeApi" :organizationMoveRow="organizationRow" v-on:on-result-change="organizationMoveDialogchange" v-on:on-refresh-change="refreshOrganization"></moveOrganizationComponent>
  </div>
</template>
<script >
  import { yfuPost } from '@/utils/request.js'
  import { yfuErrorToast, yfuConfirm, yfuSuccessToast } from '@/utils/yfuMessage.js'
  import editOrganizationComponent from '@/view/organization/organizationEdit.vue'
  import orderOrganizationComponent from '@/view/organization/organizationOrder.vue'
  import moveOrganizationComponent from '@/view/organization/organizationMove.vue'
  import store from '@/store'
  import { organizationTreeApi1, getOrganizationListRemote, saveOrganizationRemote, deleteOrganizationRemote } from '@/view/api/organization.js'
  import getPermissionByMenuId from '@/utils/MenuPermissionUtils.js'
  export default {
    components: {
      'editOrganizationComponent': editOrganizationComponent,
      'orderOrganizationComponent': orderOrganizationComponent,
      'moveOrganizationComponent': moveOrganizationComponent
    },
    props: ['menuId'],
    data () {
      return {
        type1: '0',
        searchValue: '',
        datas: [],
        currentPage: 1,
        totals: 0,
        addOrganizationDialog: false,
        dynamicValidateForm: {
          name: '',
          namejc: ''
        },
        organizationRow: {},
        cheeckedDatas: [],
        organizationOrderDialog: false,
        organizationTreeApi: organizationTreeApi1,
        permissions: '',
        organizationName: '',
        abbreviation: ''
      }
    },
    // 进入时初始化TABLE
    created () {
      let cThis = this
      this.initTable()

      getPermissionByMenuId(this.sessiongetJSON('user').id, this.menuId, function (permissionString) {
        cThis.permissions = permissionString
      })
    },
    methods: {
      indexMethod (index) {
        index += 1
        let cp = this.currentPage - 1
        let indexValue = index + cp * 10
        return indexValue
      },
      initTable () {
        this.refreshTable()
      },
      // 赋值
      assignData (data) {
        this.datas = data.datas
        this.currentPage = data.currentPage
        this.totals = data.totals
        store.commit('setOrganizationChildrens', this.totals)
      },
      // 得到数据
      getAllDatas (param) {
        let cThis = this
        yfuPost(process.env.BASE_API, getOrganizationListRemote.url, param, function (data) {
          console.log(data)
          cThis.assignData(data)
        })
      },
      // 页数改变时调用
      pageChange (toPage) {
        if (toPage < 1) {
          toPage = 1
        }
        let param = this.createParam()
        param.currentPage = toPage
        param.pageSize = 10
        console.log(param)
        this.getAllDatas(param)
      },
      refreshTableClearSearch () {
        this.searchValue = ''
        this.pageChange(1)
      },
      refreshTable () {
        this.pageChange(1)
      },
      //  点击搜索时调用
      organizationSearch () {
        // 刷新表
        this.refreshTable()
      },
      changeFun (val) {
        this.cheeckedDatas = val
      },
      // 构建参数
      createParam () {
        let param = {}
        param.organizationName = this.organizationName
        param.abbreviation = this.abbreviation
        param.id = store.getters.currentOrganizationId
        return param
      },
      // 添加组织
      addOrganization () {
        let currentOrganizationId = this.$store.getters.currentOrganizationId
        if (currentOrganizationId == null || currentOrganizationId === '') {
          yfuErrorToast('没有选中组织，请选中左边的组织！')
        } else {
          // 弹出添加组织对话框
          this.addOrganizationDialog = true
          this.dynamicValidateForm = {}
          // 刷新表
//          this.refreshTable()
//          this.$emit('listenToChildEvent')
        }
      },
      addOrganizationFunction () {

      },
      // 删除组织
      deleteOrganization () {
        let cThis = this
        if (this.cheeckedDatas == null || this.cheeckedDatas.length === 0) {
          yfuErrorToast('没有选中组织，请选中组织！')
        } else {
          console.log(this.cheeckedDatas)
          let ids = ''
          for (let data of this.cheeckedDatas) {
            ids += data.id + ','
          }
          ids = ids.substring(0, ids.length - 1)
          let params = {}
          params.ids = ids
          // 弹出添加组织对话框
          yfuConfirm('确定要删除么', function () {
            yfuPost(process.env.BASE_API, deleteOrganizationRemote.url, params, (data) => {
              yfuSuccessToast('删除成功')
              cThis.refreshOrganization()
            })
          })
        }
      },
      // 刷新组织
      refreshOrganization () {
        // 刷新表
        this.refreshTable()
        // 刷新左边的组织界面
        this.$emit('listenToChildEvent')
      },
      // 提交添加组织
      submitForm (formName) {
        let cThis = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            cThis.dynamicValidateForm.parentId = this.$store.getters.currentOrganizationId
            yfuPost(process.env.BASE_API, saveOrganizationRemote.url, cThis.dynamicValidateForm, (data) => {
              yfuSuccessToast('保存成功')
              cThis.addOrganizationDialog = false
              cThis.refreshOrganization()
            })
          } else {
            return false
          }
        })
      },
      // 去用户列表列表
      organizationToUser () {
        let cThis = this
        cThis.$emit('organizationToUser')
      },
      // 展示组织
      showOrganizationPeopleList (row) {
        let cThis = this
        console.log('rowid:' + row.id)
        store.commit('setOrganizationId', row.id)
        store.commit('setOrganizationName', row.name)
        cThis.$emit('organizationToUser')
      },
      // 展示修改组织
      showOrganizationEditDialog (row) {
        this.$refs.editOrganizationDialog.openEditDialog(row)
      },
      // 展示排序界面
      showOrganizationOrderDialog (row) {
        this.organizationRow = row
        this.organizationOrderDialog = true
      },
      // 展示移动组织界面
      showOrganizationMoveDialog (row) {
        this.$refs.moveOrganizationDialog.openMoveOrganizationDialog(row)
      },
      organizationEditDialogchange (val) {
        this.organizationEditDialog = val
      },
      organizationOrderDialogchange (val) {
        this.organizationOrderDialog = val
      },
      organizationMoveDialogchange (val) {
        this.organizationMoveDialog = val
      }
    }
  }
</script>
<style >
.organizationTableHeadCss {
  background-color: gray
}
.pointcss {
  cursor: pointer

}
/**
搜索框 左边的选择框长度
*/
.el-select .el-input {
  width: 100px;
}
</style>
